<x-admin.admin :modules="$modules" :active-module="$activeModule" :title="$title" :active-menu="$activeMenu">
    @fragment('content')
        <div class="space-y-6">
                            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">欢迎进入后台管理系统</h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        这是一个响应式侧边栏的演示页面。请尝试调整浏览器窗口大小来查看不同的侧边栏行为：
                    </p>

                    <!-- 布局状态指示器 -->
                    <div class="mb-6 p-4 bg-gradient-to-r from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
                        <h3 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">当前布局状态</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 rounded-full" :class="{
                                    'bg-green-500': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                                    'bg-blue-500': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                                    'bg-gray-400': isSmallScreen
                                }"></div>
                                <span class="text-gray-700 dark:text-gray-300">
                                    <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="text-green-600 font-medium">展开 (256px)</span>
                                    <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="text-blue-600 font-medium">收窄 (80px)</span>
                                    <span x-show="isSmallScreen" class="text-gray-500 font-medium">隐藏 (0px)</span>
                                </span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 rounded-full" :class="{
                                    'bg-green-500': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                                    'bg-blue-500': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                                    'bg-gray-400': isSmallScreen
                                }"></div>
                                <span class="text-gray-700 dark:text-gray-300">
                                    <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="text-green-600 font-medium">左边距: 256px</span>
                                    <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="text-blue-600 font-medium">左边距: 80px</span>
                                    <span x-show="isSmallScreen" class="text-gray-500 font-medium">左边距: 0px</span>
                                </span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 rounded-full" :class="{
                                    'bg-green-500': isLargeScreen,
                                    'bg-blue-500': isMediumScreen,
                                    'bg-purple-500': isSmallScreen
                                }"></div>
                                <span class="text-gray-700 dark:text-gray-300">
                                    <span x-show="isLargeScreen" class="text-green-600 font-medium">大屏幕</span>
                                    <span x-show="isMediumScreen" class="text-blue-600 font-medium">中等屏幕</span>
                                    <span x-show="isSmallScreen" class="text-purple-600 font-medium">小屏幕</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-800 dark:text-blue-200">大屏幕 (≥1024px)</h3>
                        <p class="text-blue-600 dark:text-blue-300 text-sm">侧边栏展开/收窄切换</p>
                    </div>
                    <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
                        <h3 class="font-semibold text-green-800 dark:text-green-200">中等屏幕 (768-1024px)</h3>
                        <p class="text-green-600 dark:text-green-300 text-sm">侧边栏收窄/展开切换</p>
                    </div>
                    <div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
                        <h3 class="font-semibold text-purple-800 dark:text-purple-200">小屏幕 (<768px)</h3>
                        <p class="text-purple-600 dark:text-purple-300 text-sm">侧边栏显示/隐藏切换</p>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">当前屏幕状态：</h3>
                    <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                        <div x-show="isLargeScreen" class="text-blue-600 dark:text-blue-300">
                            🖥️ 大屏幕模式 - 侧边栏可以展开/收窄
                        </div>
                        <div x-show="isMediumScreen" class="text-green-600 dark:text-green-300">
                            📱 中等屏幕模式 - 侧边栏可以收窄/展开
                        </div>
                        <div x-show="isSmallScreen" class="text-purple-600 dark:text-purple-300">
                            📱 小屏幕模式 - 侧边栏可以显示/隐藏
                        </div>
                    </div>

                    <!-- 调试信息 -->
                    <div class="mt-4 p-3 bg-gray-100 dark:bg-gray-600 rounded text-xs">
                        <h4 class="font-semibold mb-2">调试信息：</h4>
                        <div class="space-y-1">
                            <div>大屏幕: <span x-text="isLargeScreen" class="font-mono"></span></div>
                            <div>中等屏幕: <span x-text="isMediumScreen" class="font-mono"></span></div>
                            <div>小屏幕: <span x-text="isSmallScreen" class="font-mono"></span></div>
                            <div>侧边栏展开: <span x-text="sidebarExpanded" class="font-mono"></span></div>
                            <div>侧边栏收窄: <span x-text="sidebarCollapsed" class="font-mono"></span></div>
                                                    <div>侧边栏可见: <span x-text="sidebarVisible" class="font-mono"></span></div>
                    </div>

                    <!-- 布局调试信息 -->
                    <div class="mt-3 pt-3 border-t border-gray-300 dark:border-gray-500">
                        <h5 class="font-semibold mb-2">布局状态：</h5>
                        <div class="space-y-1">
                            <div>侧边栏宽度:
                                <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="font-mono text-green-600">256px (w-64)</span>
                                <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="font-mono text-blue-600">80px (w-20)</span>
                                <span x-show="isSmallScreen" class="font-mono text-purple-600">0px (隐藏)</span>
                            </div>
                            <div>主内容区左边距:
                                <span x-show="isSmallScreen" class="font-mono text-purple-600">0px (ml-0)</span>
                                <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="font-mono text-green-600">192px (ml-48)</span>
                                <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="font-mono text-blue-600">80px (ml-20)</span>
                            </div>
                            <div>CSS类状态:
                                <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="font-mono text-green-600">sidebar-expanded (w-60)</span>
                                <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="font-mono text-blue-600">sidebar-collapsed (w-20)</span>
                                <span x-show="isSmallScreen" class="font-mono text-purple-600">sidebar-hidden</span>
                            </div>
                            <div>实际left值:
                                <span x-show="isSmallScreen" class="font-mono text-purple-600">0px</span>
                                <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="font-mono text-green-600">240px</span>
                                <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="font-mono text-blue-600">80px</span>
                            </div>
                            <div>侧边栏宽度:
                                <span x-show="isSmallScreen" class="font-mono text-purple-600">0px (隐藏)</span>
                                <span x-show="(isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)" class="font-mono text-green-600">192px (w-48)</span>
                                <span x-show="(isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)" class="font-mono text-blue-600">80px (w-20)</span>
                            </div>
                            <div>实际宽度检测:
                                <span class="font-mono text-orange-600" id="actual-sidebar-width">检测中...</span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">功能说明</h3>
                <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>分辨率 ≥ 1024px：显示展开的侧边菜单，可以收窄为仅显示图标</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>分辨率 768-1024px：显示收窄的侧边菜单，鼠标悬停显示菜单名称</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>分辨率 < 768px：隐藏侧边菜单，点击按钮显示/隐藏</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>响应式按钮：根据屏幕尺寸自动调整功能</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 实时宽度检测脚本 -->
        <script>
            function updateSidebarWidth() {
                const sidebar = document.querySelector('.admin-sidebar');
                const widthDisplay = document.getElementById('actual-sidebar-width');

                if (sidebar && widthDisplay) {
                    const rect = sidebar.getBoundingClientRect();
                    const computedStyle = window.getComputedStyle(sidebar);
                    const width = rect.width;
                    const cssWidth = computedStyle.width;

                    widthDisplay.textContent = `实际: ${Math.round(width)}px | CSS: ${cssWidth}`;

                    // 添加颜色指示
                    if (Math.abs(width - 240) < 2) {
                        widthDisplay.className = 'font-mono text-green-600';
                    } else if (Math.abs(width - 80) < 2) {
                        widthDisplay.className = 'font-mono text-blue-600';
                    } else if (width < 10) {
                        widthDisplay.className = 'font-mono text-purple-600';
                    } else {
                        widthDisplay.className = 'font-mono text-red-600';
                    }
                }
            }

            // 页面加载后检测
            document.addEventListener('DOMContentLoaded', updateSidebarWidth);

            // 窗口大小变化时检测
            window.addEventListener('resize', updateSidebarWidth);

            // 定期检测（以防动态变化）
            setInterval(updateSidebarWidth, 1000);
        </script>
    @endfragment
</x-admin.admin>
